🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detecting...

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/f136fece1af912a4802e3acbf82c84b9eb554ff8/gradio-5.9.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@f136fece1af912a4802e3acbf82c84b9eb554ff8#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/f136fece1af912a4802e3acbf82c84b9eb554ff8/gradio-client-1.8.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/f136fece1af912a4802e3acbf82c84b9eb554ff8/dist/lite.js""></script>

🦄 change detected

This Pull Request includes changes to the following packages.

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Support saving chat history in gr.ChatInterface

Maintainers or the PR author can modify the PR title to modify this entry.

@abidlabs I'll replace gr.State() here with gr.BrowserState(), and update the styling of the html "sidebar". Is that what you had in mind?

Yes exactly. We also need to actually save the chat history to the browser state, that functionality is currently not implemented

You may find this PR useful: #10245 (or maybe not, not sure)

@abidlabs Did a first pass, and the functionality for chat conversation history should work, if you can test. Will push some changes to tweak the UI.

Will take a look soon!

Nice @dawoodkhan82! Core functionality to save to browser state is working for me and I like that the first message automatically becomes the title of the saved first chat. Some issues I noticed:

(1) Clicking on the trash button in Chatbot causes the history to error out. And in a permanent way: if you refresh the page, you'll see that none of the chats in the history remain and you actually need to restart the Gradio server to get the chat history working again:

(2) Uploading an image breaks the chat history feature as well:

(3) When you load the chat from the history, its not synchronized with the chat state, so that if you send a subsequent message, it wipes out the chat history instead of "resuming" from the last message:

(4) Also, the final chat that is stored to history seems to be used as the value for all of the chats. So if you click through the chats, all of them will have the same value actually:

Fixed isseus (3) and (4), working on the others

There are some edge cases I need to fix (e.g. handling images and other non-text messages) but let me open for feedback, especially on the design side

Small nit: The plus icon in chat history is black in dark mode. I tried fixing it but it seems like we have to change the styling in the Button component, which might cause other issues

stroke="currentColor" might fix, e.g. https://github.com/gradio-app/gradio/blob/main/js/icons/src/Erase.svelte#L11

@aliabid94 Button.svelte uses <img> tags for icons which doesn't inherit "currentColor". Can change the Button.svelte implementation to use <svg> for icons, but that might have unintended effects.

Small nit: The plus icon in chat history is black in dark mode. I tried fixing it but it seems like we have to change the styling in the Button component, which might cause other issues

Ah good catch, I wonder if we can change it to gray or something

Pushed up some changes (just docs/guides)

Looks good! Only thing is the icon as discussed above. It'd be nice if the spacing in dataframe was slightly cleaner and maybe adding word-break to prevent horizontal scrolling but I gave it a go myself and it's definitely too fiddly and non-blocking for now I think.

Thanks folks! I have updated the icon to a shape and color that looks good in dark and light mode:

Will merge this in once CI runs. Thanks @dawoodkhan82 @aliabid94 @hannahblair!